<template>
    <div class="flex baobiaoContent">
        <div class="detailNavigationBar divCss">
            <div   :style="{fontSize:'14px'}"
                    class="detail" :title="item.name"
                    v-for="(item,index) in tableListArr"
                    @click="detailTable(item,index)"
                    :class="{bgc:tableNum==index}"
                    :key="index"
            >{{ item.name }}
            </div>
        </div>

        <div class="baobiaoBox divCss">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
export default {
  id:'tjbb',
  data () {
    return {
      msg: '统计报表',
      tableNum: 0,
      tableListArr: [
        { name: "重要经济目标数量综合统计表", path: "/sjwh/tjbb/zyjjmb" },
        { name: "专业力量建设累计情况综合统计表", path: "/sjwh/tjbb/zylljslj" },
        { name: "单位专业力量年龄、知识结构情况综合统计表", path: "/sjwh/tjbb/dwzyllnl" },
        { name: "防护建设累计情况综合统计表", path: "/sjwh/tjbb/fhjsljqk" },
        // { name: "组织指挥建设累计情况综合统计表", path: "/sjwh/tjbb/zzzhjsljqk" },
        { name: "单位经费年度情况综合统计表", path: "/sjwh/tjbb/dwjfndqk" },
        { name: "单位经费累计情况综合统计表", path: "/sjwh/tjbb/dwjfljqk" }
      ],
    }
  },
  methods: {
    detailTable(item,index) {
      this.tableNum = index;
      this.$router.push(item.path);
    },
  },
}
</script>

<style lang="less">
.baobiaoContent{
    height: calc(100% - 65px);
    width: 100%;
    .baobiaoBox {
        box-sizing: border-box;
        padding: 20px;
        margin-left: 10px;
        height: 100%;
        width: calc(100% - 230px);
    }
}
</style>
